<template>
  <el-icon v-if="iconType == 'element'" :style="style" :class="['icon el-icon', props.class]">
    <component :is="iconName" />
  </el-icon>
  <i v-else :class="[iconType, iconName, props.class]" :style="style"></i>
</template>
<script lang="ts" setup>
import { watch, ref, reactive } from 'vue'

const props = defineProps({
  name: {
    type: String,
    required: true
  },
  color: {
    type: String,
    default: 'var(--color)'
  },
  class: {
    type: [String, Object],
    default: ''
  },
  size: {
    type: String,
    default: '16px'
  }
})

const iconType = ref('')
const iconName = ref('')

const style = reactive({
  color: props.color,
  fontSize: props.size
})

const load = () => {
  const arr = props.name.split(' ')
  iconType.value = arr[0]
  iconName.value = arr[1]
}

load()

watch(
  () => props.name,
  () => {
    load()
  }
)
</script>
